<template>
  <div class="Person_3">
    <p>Age: {{ a }}</p>
    <p>Occupation: {{ occupation }}</p>
    <!-- <button @click="showname">查看姓名</button>
    <button @click="changename">修改姓名</button> -->
  </div>
</template>
<script lang="ts">
// 这里可以添加 Vue 3 的 setup 语法
export default {
  name: 'Person_3',

  data() {
    return {
      // name: 'John Doe',
      a: this.age,
      occupation: 'Software Developer',
    }
  },
  methods: {
    // changename() {
    //   this.name = 'zhang_san'
    // },
    // showname() {
    //   alert(this.name)
    // },
  },

  setup() {
    // 数据
    // let name = 'John Doe'
    const age = 30
    // const occupation = 'Software Developer'

    // // 方法
    // function changename() {
    //   name = 'zhang_san'
    // }

    // const showname = () => {
    //   alert(name)
    // }

    return {
      age,
      // occupation,
      // showname,
      // changename,
    }
  },
}
</script>
<style scoped></style>

//总结
//vue2中可以在data或methods中调用setup中的数据和方法，但在vue3中，setup中的数据和方法需要通过return暴露出来才能在模板中使用。
// 在vue3中，data和methods不再是必须的，可以直接在setup中
